<template>
	<view style="background-color: white;">
		<view v-if="list.length>0" style="padding: 30rpx;">
			<view style="font-weight: bold;display: flex;justify-content: space-between;">
				<text>
					出车验车信息
				</text>
				<text v-if="list.find((item)=>item.validate_item_id==8)!=undefined">
					{{list.find((item)=>item.validate_item_id==8).validate_value?list.find((item)=>item.validate_item_id==8).validate_value+'公里':'未填写'}}
				</text>
				<text v-else>
					未填写
				</text>
			</view>
			<view>出车图片</view>
			<view style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20rpx;margin-top: 20rpx;">
				<view v-for=" (item,idx) in list.filter(item=>item.validate_item_pic!=null&&item.validate_item_id<10)"
					style="border: #f8f8f8 solid 1px;">
					<u-image width="100%" height="206rpx" :src="host+item.validate_item_pic"
						@click="showImg(list.filter(item=>item.validate_item_pic!=null).map(item=>host+item.validate_item_pic),idx)"
						style="border-radius: 50rpx;" border-radius="10"></u-image>
				</view>
			</view>
			<view>出车视频</view>
			<view style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20rpx;margin-top: 20rpx;">
				<view style="width: 200rpx;height: 200rpx;margin: 5px;border-radius: 10rpx;"
					v-for="item in list.filter(item=>item.validate_item_id==10)">
					<video :src="host+item.validate_item_pic" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;"
						:controls="true" :show-fullscreen-btn="true" :show-play-btn="true" :show-center-play-btn="true"
						:enable-progress-gesture="false" object-fit="fill"></video>
				</view>
			</view>
			<view style="">
				<u-alert-tips type="warning" :title="'车损内容：'+($u.timeFormat(sun.tjsj,'yyyy-mm-dd hh:MM'))+'  '+(sun.employe_name)" style="margin-top: 30rpx;"
					v-for="sun in list.filter(item=>item.validate_item_id==11&&item.validate_result==2)"
					:description="sun.validate_result_desc"></u-alert-tips>
			</view>
			<view style="">
				<u-alert-tips type="error" :title="'维修内容：'+($u.timeFormat(sun.tjsj,'yyyy-mm-dd hh:MM'))+'  '+(sun.employe_name)" style="margin-top: 30rpx;"
					v-for="sun in list.filter(item=>item.validate_item_id==13&&item.car_need_repair==2)"
					:description="sun.validate_result_desc"></u-alert-tips>
			</view>
		</view>
		<view style="margin: 20rpx;">
			<u-button type="primary" @click="carValidatePage(1)">补录出车信息</u-button>
		</view>
		<view v-if="list2.length>0" style="padding: 30rpx;">
			<view style="font-weight: bold;display: flex;justify-content: space-between;">
				<text>
					还车验车信息
				</text>
				<text v-if="list2.find((item)=>item.validate_item_id==8)!=undefined">
					{{list2.find((item)=>item.validate_item_id==8).validate_value?list2.find((item)=>item.validate_item_id==8).validate_value+'公里':'未填写'}}
				</text>
				<text v-else>
					未填写
				</text>
			</view>
			<view>出车图片</view>
			<view style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20rpx;margin-top: 20rpx;">
				<view v-for=" (item,idx) in list2.filter(item=>item.validate_item_pic!=null&&item.validate_item_id<10)"
					style="border: #f8f8f8 solid 1px;">
					<u-image width="100%" height="206rpx" :src="host+item.validate_item_pic"
						@click="showImg(list2.filter(item=>item.validate_item_pic!=null).map(item=>host+item.validate_item_pic),idx)"
						style="border-radius: 50rpx;" border-radius="10"></u-image>
				</view>
			</view>
			<view>出车视频</view>
			<view style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20rpx;margin-top: 20rpx;">
				<view style="width: 200rpx;height: 200rpx;margin: 5px;border-radius: 10rpx;"
					v-for="item in list2.filter(item=>item.validate_item_id==10)">
					<video :src="host+item.validate_item_pic" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;"
						:controls="true" :show-fullscreen-btn="true" :show-play-btn="true" :show-center-play-btn="true"
						:enable-progress-gesture="false" object-fit="fill"></video>
				</view>
			</view>
			<view style="">
				<u-alert-tips type="warning" :title="'车损内容：'+($u.timeFormat(sun.tjsj,'yyyy-mm-dd hh:MM'))+'  '+(sun.employe_name)" style="margin-top: 30rpx;"
					v-for="sun in list2.filter(item=>item.validate_item_id==11&&item.validate_result==2)"
					:description="sun.validate_result_desc"></u-alert-tips>
			</view>
			<view style="">
				<u-alert-tips type="error" :title="'维修内容：'+($u.timeFormat(sun.tjsj,'yyyy-mm-dd hh:MM'))+'  '+(sun.employe_name)" style="margin-top: 30rpx;"
					v-for="sun in list2.filter(item=>item.validate_item_id==13&&item.car_need_repair==2)"
					:description="sun.validate_result_desc"></u-alert-tips>
			</view>
		</view>
		<view style="margin: 20rpx;">
			<u-button type="primary" @click="carValidatePage(2)">补录还车信息</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				host: 'https://cos2.ksmeilv.com',
				orders_id: '',
				list: [],
				list2: [],
				object: 1
			}
		},
		onLoad(options) {
			var that = this;
			var list = JSON.parse(decodeURIComponent(options.list));
			console.log(list);
			this.list = list.filter(item => item.validate_object == 1);
			this.list2 = list.filter(item => item.validate_object == 2);
			this.orders_id = options.orders_id;
			var object = options.object;
			this.object = object;
			uni.setNavigationBarTitle({
				title: object == 1 ? '出车验车信息' : '还车验车信息'
			});
			uni.$on('getOrdersInfo', function(data) {
				console.log("监听到了，啦啦啦");
				that.getOrderInfo();
			})
		},
		methods: {
			showImg(list, idx) {
				console.log(list);
				uni.previewImage({
					urls: list,
					current: idx
				})
			},
			carValidatePage(e) {
				var list = [];
				if (e == 2) {
					list = this.list;
				}
				uni.navigateTo({
					url: '/pages/carValidate/carValidate?orders_id=' + this.orders_id + '&object=' + e + '&list=' +
						JSON.stringify(list)
				})
			},
			getList(img) {
				var arry = [];
				if (!img) {
					return arry;
				}
				arry = img.split(",");
				for (var i = 0; i < arry.length; i++) {
					arry[i] = this.host + arry[i];
				}
				return arry;
			},
			getOrderInfo() {
				var that = this;
				that.$http.get('/orders/queryById?orders_id=' + this.orders_id, {}, (res) => {
					if (res.data.success) {
						var list = res.data.result.carValidateList;
						that.list = list.filter(item => item.validate_object == 1);
						that.list2 = list.filter(item => item.validate_object == 2);
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
		}
	}
</script>

<style>

</style>